<template>
  <UserLayout :active-index="'2'" :active-menu="'landlord-center'">
    <div class="appointments-content">
      <div class="appointments-header">
        <el-button type="primary" @click="goBack" class="back-btn">
          <el-icon><ArrowLeft /></el-icon>
          返回房东中心
        </el-button>
        <h2>预约申请管理</h2>
        <p>处理租客提交的看房预约申请</p>
      </div>

      <!-- 预约申请列表 -->
      <div class="appointments-list">
        <el-table :data="appointments" style="width: 100%">
          <el-table-column prop="id" label="预约编号" width="120"></el-table-column>
          <el-table-column prop="houseTitle" label="房源信息" width="200"></el-table-column>
          <el-table-column prop="tenantName" label="申请人" width="120"></el-table-column>
          <el-table-column prop="appointmentTime" label="预约时间" width="150"></el-table-column>
          <el-table-column prop="status" label="状态" width="120">
            <template #default="scope">
              <el-tag :type="getStatusType(scope.row.status)">
                {{ getStatusText(scope.row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="applyTime" label="申请时间" width="150"></el-table-column>
          <el-table-column label="操作" width="250">
            <template #default="scope">
              <el-button size="small" @click="viewDetails(scope.row)">查看详情</el-button>
              <template v-if="scope.row.status === 'pending'">
                <el-button size="small" type="success" @click="approveAppointment(scope.row)">同意</el-button>
                <el-button size="small" type="danger" @click="rejectAppointment(scope.row)">拒绝</el-button>
              </template>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 预约详情弹窗 -->
    <el-dialog v-model="dialogVisible" title="预约详情" width="600px">
      <div v-if="selectedAppointment" class="detail-content">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="预约编号">{{ selectedAppointment.id }}</el-descriptions-item>
          <el-descriptions-item label="房源信息">{{ selectedAppointment.houseTitle }}</el-descriptions-item>
          <el-descriptions-item label="申请人">{{ selectedAppointment.tenantName }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ selectedAppointment.tenantPhone }}</el-descriptions-item>
          <el-descriptions-item label="预约时间">{{ selectedAppointment.appointmentTime }}</el-descriptions-item>
          <el-descriptions-item label="申请时间">{{ selectedAppointment.applyTime }}</el-descriptions-item>
          <el-descriptions-item label="预约状态" :span="2">
            <el-tag :type="getStatusType(selectedAppointment.status)">
              {{ getStatusText(selectedAppointment.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="备注信息" :span="2">{{ selectedAppointment.remark || '无' }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </UserLayout>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import UserLayout from '@/components/layout/UserLayout.vue'
import { ArrowLeft } from '@element-plus/icons-vue'

const router = useRouter()

// 返回房东中心
const goBack = () => {
  router.push('/rental/landlord')
}

// 数据
const dialogVisible = ref(false)
const selectedAppointment = ref(null)

// 模拟预约申请数据
const appointments = ref([
  {
    id: 'AP001',
    houseTitle: '北京市朝阳区三里屯SOHO 2号楼1501室',
    tenantName: '张三',
    tenantPhone: '138****1234',
    appointmentTime: '2025-06-10 14:00:00',
    status: 'pending',
    applyTime: '2025-06-08 10:30:00',
    remark: '希望能看到房间的采光情况'
  },
  {
    id: 'AP002',
    houseTitle: '北京市海淀区中关村大街1号院3号楼802室',
    tenantName: '李四',
    tenantPhone: '139****5678',
    appointmentTime: '2025-06-12 16:30:00',
    status: 'confirmed',
    applyTime: '2025-06-09 15:20:00',
    remark: '想了解周边交通情况'
  },
  {
    id: 'AP003',
    houseTitle: '北京市西城区金融街5号院1号楼1203室',
    tenantName: '王五',
    tenantPhone: '137****9012',
    appointmentTime: '2025-06-15 10:00:00',
    status: 'rejected',
    applyTime: '2025-06-11 09:45:00',
    remark: '时间冲突，已拒绝'
  }
])

// 查看详情
const viewDetails = (appointment) => {
  selectedAppointment.value = appointment
  dialogVisible.value = true
}

// 同意预约
const approveAppointment = (appointment) => {
  ElMessageBox.confirm('确定同意这个预约申请吗？', '确认操作', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    appointment.status = 'confirmed'
    ElMessage.success('已同意预约申请')
  }).catch(() => {
    ElMessage.info('已取消操作')
  })
}

// 拒绝预约
const rejectAppointment = (appointment) => {
  ElMessageBox.confirm('确定拒绝这个预约申请吗？', '确认操作', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    appointment.status = 'rejected'
    ElMessage.success('已拒绝预约申请')
  }).catch(() => {
    ElMessage.info('已取消操作')
  })
}

// 获取状态类型
const getStatusType = (status) => {
  const statusMap = {
    'pending': 'warning',
    'confirmed': 'success',
    'rejected': 'danger',
    'completed': 'info'
  }
  return statusMap[status] || 'info'
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    'pending': '待确认',
    'confirmed': '已确认',
    'rejected': '已拒绝',
    'completed': '已完成'
  }
  return statusMap[status] || '未知'
}
</script>

<style scoped>
.appointments-content {
  padding: 20px;
}

.appointments-header {
  text-align: center;
  margin-bottom: 30px;
  position: relative;
}

.appointments-header h2 {
  color: #2c3e50;
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 10px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.appointments-header p {
  color: #7f8c8d;
  font-size: 16px;
  margin: 0;
}

.back-btn {
  position: absolute;
  top: 0;
  left: 0;
}

.appointments-list {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.detail-content {
  padding: 20px 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .appointments-content {
    padding: 15px;
  }
  
  .appointments-header h2 {
    font-size: 24px;
  }
  
  .back-btn {
    position: static;
    margin-bottom: 20px;
  }
}
</style>
